<!DOCTYPE html><html class="theme-next gemini use-motion" lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="theme-color" content="#222"><script src="/MyBlog/lib/pace/pace.min.js?v=1.0.2"></script><link href="/MyBlog/lib/pace/pace-theme-loading-bar.min.css?v=1.0.2" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/MyBlog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/MyBlog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/MyBlog/css/main.css?v=5.1.4" rel="stylesheet" type="text/css"><link rel="apple-touch-icon" sizes="180x180" href="/MyBlog/images/apple-touch-icon-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="32x32" href="/MyBlog/images/bitbug_favicon.ico?v=5.1.4"><link rel="icon" type="image/png" sizes="16x16" href="/MyBlog/images/bitbug_favicon16.ico?v=5.1.4"><link rel="mask-icon" href="/MyBlog/images/logo.svg?v=5.1.4" color="#222"><meta name="keywords" content="Hexo, NexT"><meta property="og:type" content="website"><meta property="og:title" content="Yang&#39;s Blog"><meta property="og:url" content="https://gitee.com/yang_yu_xiang/MyBlog/index.html"><meta property="og:site_name" content="Yang&#39;s Blog"><meta property="article:author" content="杨雨翔"><meta name="twitter:card" content="summary"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/MyBlog/",scheme:"Gemini",version:"5.1.4",sidebar:{position:"left",display:"post",offset:12,b2t:!1,scrollpercent:!0,onmobile:!0},fancybox:!0,tabs:!0,motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},duoshuo:{userId:"0",author:"博主"},algolia:{applicationID:"",apiKey:"",indexName:"",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><link rel="canonical" href="https://gitee.com/yang_yu_xiang/MyBlog/"><title>Yang's Blog</title><meta name="generator" content="Hexo 4.2.1"></head><body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans"><div class="container sidebar-position-left page-home"><div class="headband"></div><a href="https://gitee.com/yang_yu_xiang" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/MyBlog/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Yang's Blog</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle">永远年轻 永远热泪盈眶</p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/MyBlog/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-tags"><a href="/MyBlog/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-categories"><a href="/MyBlog/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-archives"><a href="/MyBlog/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><section id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2021/01/24/%E5%AE%9D%E5%A1%94%E5%AE%89%E8%A3%85mysql%E5%90%8E%E4%BD%BF%E7%94%A8navicat%E8%BF%9E%E6%8E%A5/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2021/01/24/%E5%AE%9D%E5%A1%94%E5%AE%89%E8%A3%85mysql%E5%90%8E%E4%BD%BF%E7%94%A8navicat%E8%BF%9E%E6%8E%A5/" itemprop="url">宝塔安装mysql后使用navicat连接</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2021-01-24T15:10:22+08:00">2021-01-24 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2021-01-24T15:27:09+08:00">2021-01-24 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2021/01/24/%E5%AE%9D%E5%A1%94%E5%AE%89%E8%A3%85mysql%E5%90%8E%E4%BD%BF%E7%94%A8navicat%E8%BF%9E%E6%8E%A5/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2021/01/24/%E5%AE%9D%E5%A1%94%E5%AE%89%E8%A3%85mysql%E5%90%8E%E4%BD%BF%E7%94%A8navicat%E8%BF%9E%E6%8E%A5/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">289 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">1</span></div></div></header><div class="post-body" itemprop="articleBody"><p>今天自己买了个服务器折腾，在服务器中创建完数据库后，本地使用<code>navicat</code>无法连接到数据库，在这记录一下解决方法</p><h1 id="基础配置"><a href="#基础配置" class="headerlink" title="基础配置"></a>基础配置</h1><h2 id="宝塔面板-gt-放行端口-3306"><a href="#宝塔面板-gt-放行端口-3306" class="headerlink" title="宝塔面板 =&gt; 放行端口:3306"></a>宝塔面板 =&gt; 放行端口:3306</h2><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/%E6%94%BE%E8%A1%8C%E7%AB%AF%E5%8F%A3.png" alt=""></p><h2 id="2-阿里云安全组-gt-放行端口-3306"><a href="#2-阿里云安全组-gt-放行端口-3306" class="headerlink" title="2.阿里云安全组 =&gt; 放行端口:3306"></a>2.阿里云安全组 =&gt; 放行端口:3306</h2><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/1238941-20190418094559780-716689832.png" alt=""></p><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/1238941-20190418094439006-1724183264.png" alt=""></p><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/1238941-20190418094903913-1417230784.png" alt=""></p><h1 id="远程连接方式配置"><a href="#远程连接方式配置" class="headerlink" title="远程连接方式配置"></a>远程连接方式配置</h1><div class="post-button text-center"><a class="btn" href="/MyBlog/2021/01/24/%E5%AE%9D%E5%A1%94%E5%AE%89%E8%A3%85mysql%E5%90%8E%E4%BD%BF%E7%94%A8navicat%E8%BF%9E%E6%8E%A5/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/12/23/ElementUI%E4%B8%AD%E7%9A%84%E6%A0%91%E5%BD%A2%E7%BB%93%E6%9E%84%E9%97%AE%E9%A2%98/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/12/23/ElementUI%E4%B8%AD%E7%9A%84%E6%A0%91%E5%BD%A2%E7%BB%93%E6%9E%84%E9%97%AE%E9%A2%98/" itemprop="url">ElementUI中的树形结构问题</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-12-23T15:36:04+08:00">2020-12-23 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2021-01-11T08:59:57+08:00">2021-01-11 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/12/23/ElementUI%E4%B8%AD%E7%9A%84%E6%A0%91%E5%BD%A2%E7%BB%93%E6%9E%84%E9%97%AE%E9%A2%98/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/12/23/ElementUI%E4%B8%AD%E7%9A%84%E6%A0%91%E5%BD%A2%E7%BB%93%E6%9E%84%E9%97%AE%E9%A2%98/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">1.1k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">4</span></div></div></header><div class="post-body" itemprop="articleBody"><p>最近实习了，很久没写博客，今天来记录一下使用<code>ElementUI</code>的树行控件遇到的问题</p><h1 id="问题一-：elementui-中树形结构问题"><a href="#问题一-：elementui-中树形结构问题" class="headerlink" title="问题一 ：elementui 中树形结构问题"></a>问题一 ：elementui 中树形结构问题</h1><h2 id="问题起因"><a href="#问题起因" class="headerlink" title="问题起因"></a>问题起因</h2><p>在<code>ElementUI</code>中，我们想要渲染一颗树结构，像这样：<br><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/%E6%A0%91%E5%BD%A2%E6%8E%A7%E4%BB%B6.png" alt=""></p><p>那么我们从后端拿到的数据必须是层层嵌套<code>children</code>属性的一个对象:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">data: [&#123;</span><br><span class="line">          label: <span class="string">'一级 1'</span>,</span><br><span class="line">          children: [&#123;</span><br><span class="line">            label: <span class="string">'二级 1-1'</span>,</span><br><span class="line">            children: [&#123;</span><br><span class="line">              label: <span class="string">'三级 1-1-1'</span></span><br><span class="line">            &#125;]</span><br><span class="line">          &#125;]</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">          label: <span class="string">'一级 2'</span>,</span><br><span class="line">          children: [&#123;</span><br><span class="line">            label: <span class="string">'二级 2-1'</span>,</span><br><span class="line">            children: [&#123;</span><br><span class="line">              label: <span class="string">'三级 2-1-1'</span></span><br><span class="line">            &#125;]</span><br><span class="line">          &#125;, &#123;</span><br><span class="line">            label: <span class="string">'二级 2-2'</span>,</span><br><span class="line">            children: [&#123;</span><br><span class="line">              label: <span class="string">'三级 2-2-1'</span></span><br><span class="line">            &#125;]</span><br><span class="line">          &#125;]</span><br><span class="line">        &#125;, &#123;</span><br><span class="line">          label: <span class="string">'一级 3'</span>,</span><br><span class="line">          children: [&#123;</span><br><span class="line">            label: <span class="string">'二级 3-1'</span>,</span><br><span class="line">            children: [&#123;</span><br><span class="line">              label: <span class="string">'三级 3-1-1'</span></span><br><span class="line">            &#125;]</span><br><span class="line">          &#125;, &#123;</span><br><span class="line">            label: <span class="string">'二级 3-2'</span>,</span><br><span class="line">            children: [&#123;</span><br><span class="line">              label: <span class="string">'三级 3-2-1'</span></span><br><span class="line">            &#125;]</span><br><span class="line">          &#125;]</span><br><span class="line">        &#125;],</span><br></pre></td></tr></table></figure><p>问题来了，后端很忙，没空改接口，所以他返回的数据是这样的：</p><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/%E6%8E%A5%E5%8F%A3%E4%BC%A0%E5%80%BC.png" alt=""></p><p>自身的唯一 id 为<code>depCode</code>,与父节点关联的 id 为<code>parentCode</code>。这样就不是<code>elementUI</code>中定义的数据格式。那么我们就需要做转换，把这样一个数组转换成为<code>elementui</code>中所需要的数据格式</p><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/12/23/ElementUI%E4%B8%AD%E7%9A%84%E6%A0%91%E5%BD%A2%E7%BB%93%E6%9E%84%E9%97%AE%E9%A2%98/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/11/11/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%BA%94%EF%BC%89Koa%E8%BF%9E%E6%8E%A5mysql/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/11/11/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%BA%94%EF%BC%89Koa%E8%BF%9E%E6%8E%A5mysql/" itemprop="url">Koa框架（五）Koa连接mysql</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-11-11T15:33:22+08:00">2020-11-11 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-11-11T15:49:01+08:00">2020-11-11 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/11/11/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%BA%94%EF%BC%89Koa%E8%BF%9E%E6%8E%A5mysql/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/11/11/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%BA%94%EF%BC%89Koa%E8%BF%9E%E6%8E%A5mysql/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">467 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">2</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="npm安装mysql"><a href="#npm安装mysql" class="headerlink" title="npm安装mysql"></a>npm安装mysql</h1><blockquote><p>npm install mysql -s</p></blockquote><h1 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h1><p>我们首先定义一个连接驱动信息，然后把导出去：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//default.js</span></span><br><span class="line"><span class="keyword">var</span> connection = (&#123;</span><br><span class="line">    host: <span class="string">'localhost'</span>,</span><br><span class="line">    user: <span class="string">'root'</span>,</span><br><span class="line">    password: <span class="string">'root'</span>,</span><br><span class="line">    database: <span class="string">'quizzes'</span>,</span><br><span class="line">    port:<span class="number">3306</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">module</span>.exports = connection</span><br></pre></td></tr></table></figure><p>然后，我们定义一个<code>query.js</code>文件，这个文件定义我们连接数据库</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//query.js</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//导入mysql</span></span><br><span class="line"><span class="keyword">const</span> mysql = <span class="built_in">require</span>(<span class="string">'mysql'</span>)</span><br><span class="line"><span class="comment">//导入数据库配置</span></span><br><span class="line"><span class="keyword">const</span> MYSQL_CONFIG = <span class="built_in">require</span>(<span class="string">'./default'</span>)</span><br><span class="line"><span class="comment">// mysql连接池</span></span><br><span class="line"><span class="keyword">const</span> pool = mysql.createPool(MYSQL_CONFIG)</span><br><span class="line"><span class="comment">// query sql语句入口</span></span><br><span class="line"><span class="keyword">const</span> query = <span class="function">(<span class="params">sql, val</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        pool.getConnection(<span class="function"><span class="keyword">function</span> (<span class="params">err, connection</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">if</span> (err) &#123;</span><br><span class="line">                reject(err)</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">else</span> &#123;</span><br><span class="line">                connection.query(sql, val, (err, fields) =&gt; &#123;</span><br><span class="line">                    <span class="keyword">if</span> (err) reject(err)</span><br><span class="line">                    <span class="keyword">else</span> resolve(fields)</span><br><span class="line">                    connection.release()</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    <span class="comment">//导出query，我们只需要往query里面放sql语句就行了</span></span><br><span class="line">    query</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/11/11/Koa%E6%A1%86%E6%9E%B6%EF%BC%88%E4%BA%94%EF%BC%89Koa%E8%BF%9E%E6%8E%A5mysql/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/11/03/moment-js%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/11/03/moment-js%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/" itemprop="url">moment.js使用方法总结</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-11-03T22:59:44+08:00">2020-11-03 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-11-04T09:48:24+08:00">2020-11-04 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/11/03/moment-js%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/11/03/moment-js%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">1.6k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">7</span></div></div></header><div class="post-body" itemprop="articleBody"><p>&emsp;&emsp;<code>Moment.js</code>是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。下面就是我对moment.js使用过程中的整理，方便以后查阅。</p><h1 id="引入moment-js"><a href="#引入moment-js" class="headerlink" title="引入moment.js"></a>引入moment.js</h1><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><blockquote><p>npm install moment –save或者 yarn add moment</p></blockquote><h2 id="引入"><a href="#引入" class="headerlink" title="引入"></a>引入</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// require 方式</span></span><br><span class="line"><span class="keyword">var</span> moment = <span class="built_in">require</span>(<span class="string">'moment'</span>);</span><br><span class="line"><span class="comment">// import 方式</span></span><br><span class="line"><span class="keyword">import</span> moment <span class="keyword">from</span> <span class="string">'moment'</span>;</span><br></pre></td></tr></table></figure><p>浏览器方式引入</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"moment.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="设定moment区域为中国"><a href="#设定moment区域为中国" class="headerlink" title="设定moment区域为中国"></a>设定moment区域为中国</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// require 方式</span></span><br><span class="line"><span class="built_in">require</span>(<span class="string">'moment/locale/zh-cn'</span>)</span><br><span class="line">moment.locale(<span class="string">'zh-cn'</span>); </span><br><span class="line"></span><br><span class="line"><span class="comment">// import 方式</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'moment/locale/zh-cn'</span></span><br><span class="line">moment.locale(<span class="string">'zh-cn'</span>);</span><br></pre></td></tr></table></figure><h1 id="方法速查"><a href="#方法速查" class="headerlink" title="方法速查"></a>方法速查</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">moment() <span class="comment">//获取时间</span></span><br><span class="line"></span><br><span class="line">moment().startOf(<span class="string">'?'</span>)<span class="comment">//获取本周、本月的第一天0时0分0秒</span></span><br><span class="line"></span><br><span class="line">moment().endOf(<span class="string">'?'</span>)<span class="comment">//获取本周、本月的最后一天23时59分59秒</span></span><br><span class="line"></span><br><span class="line">moment().dayInMonth()<span class="comment">//获取当月总天数</span></span><br><span class="line"></span><br><span class="line">moment().unix()<span class="comment">//返回时间戳（number）</span></span><br><span class="line"></span><br><span class="line">moment().get(<span class="string">'?'</span>)</span><br><span class="line">moment().?()<span class="comment">//获取某一事件</span></span><br><span class="line"></span><br><span class="line">moment().set(<span class="string">'?'</span>,num)</span><br><span class="line">moment().?(num)<span class="comment">//设置某一时间</span></span><br><span class="line"></span><br><span class="line">moment().add(num,<span class="string">'?'</span>)<span class="comment">//时间+num</span></span><br><span class="line"></span><br><span class="line">moment().subtract(num,<span class="string">'?'</span>)<span class="comment">//时间-num</span></span><br><span class="line"></span><br><span class="line">moment().format(<span class="string">'xxxxxxx'</span>)<span class="comment">//格式化时间</span></span><br><span class="line"></span><br><span class="line">diff()<span class="comment">//比较时间</span></span><br><span class="line"></span><br><span class="line">toDate()<span class="comment">//时间转换成Date对象</span></span><br><span class="line"></span><br><span class="line">fromNow()<span class="comment">//相对现在的时间</span></span><br><span class="line"></span><br><span class="line">calendar()<span class="comment">//日期时间</span></span><br></pre></td></tr></table></figure><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/11/03/moment-js%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/10/30/Vue3-0%EF%BC%88%E4%BA%94%EF%BC%89toRef%E5%92%8CtoRefs/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/10/30/Vue3-0%EF%BC%88%E4%BA%94%EF%BC%89toRef%E5%92%8CtoRefs/" itemprop="url">Vue3.0（五）toRef和toRefs</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-10-30T22:13:00+08:00">2020-10-30 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-11-02T15:35:58+08:00">2020-11-02 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/10/30/Vue3-0%EF%BC%88%E4%BA%94%EF%BC%89toRef%E5%92%8CtoRefs/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/10/30/Vue3-0%EF%BC%88%E4%BA%94%EF%BC%89toRef%E5%92%8CtoRefs/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">1.3k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">5</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="watchEffect"><a href="#watchEffect" class="headerlink" title="watchEffect"></a>watchEffect</h1><p><code>watchEffect</code> 的作用是在响应式数据发生变化的时候产生对应的副作用。例如：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;obj.foo&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"inc"</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123; reactive, watchEffect &#125; <span class="keyword">from</span> <span class="string">'vue'</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript">  name: <span class="string">'App'</span>,</span></span><br><span class="line">  setup() &#123;</span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> obj = reactive(&#123;</span></span><br><span class="line">      foo: 1</span><br><span class="line"><span class="actionscript">    &#125;); <span class="comment">// obj 是响应式数据</span></span></span><br><span class="line"></span><br><span class="line"><span class="javascript">    watchEffect(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(obj.foo);</span></span><br><span class="line"><span class="actionscript">    &#125;) <span class="comment">// 跟踪依赖数据 （obj.foo）</span></span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">inc</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line">      obj.foo += 1;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line">      obj,</span><br><span class="line">      inc</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/10/30/Vue3-0%EF%BC%88%E4%BA%94%EF%BC%89toRef%E5%92%8CtoRefs/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/10/29/Vue3-0%EF%BC%88%E5%9B%9B%EF%BC%89toRaw/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/10/29/Vue3-0%EF%BC%88%E5%9B%9B%EF%BC%89toRaw/" itemprop="url">Vue3.0（四）toRaw</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-10-29T23:10:56+08:00">2020-10-29 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-30T21:52:51+08:00">2020-10-30 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/10/29/Vue3-0%EF%BC%88%E5%9B%9B%EF%BC%89toRaw/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/10/29/Vue3-0%EF%BC%88%E5%9B%9B%EF%BC%89toRaw/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">1.3k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">6</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="关于-Reactive-的一些补充"><a href="#关于-Reactive-的一些补充" class="headerlink" title="关于 Reactive 的一些补充"></a>关于 Reactive 的一些补充</h1><p>先看代码</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>msg.content = &#123;&#123;msg.content&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"changeObj"</span>&gt;</span>changeObj<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"changeMsg"</span>&gt;</span>changeMsg<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123; reactive &#125; <span class="keyword">from</span> <span class="string">'vue'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript">  name: <span class="string">'App'</span>,</span></span><br><span class="line">  setup() &#123;</span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> obj = &#123;</span></span><br><span class="line"><span class="actionscript">      content: <span class="string">'content'</span></span></span><br><span class="line">    &#125;;</span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> msg = reactive(obj);</span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">changeMsg</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">      msg.content = <span class="string">'changedMsg'</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(msg);</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(obj);</span></span><br><span class="line">    &#125;;</span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">changeObj</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">      obj.content = <span class="string">'changedObj'</span></span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(msg);</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(obj);</span></span><br><span class="line">    &#125;;</span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line">      msg,</span><br><span class="line">      changeMsg,</span><br><span class="line">      changeObj</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>&emsp;&emsp;在这里，我创建了一个对象 <code>obj</code> ，然后通过 <code>msg</code>创建 <code>reactive</code> 参数指定这个对象。那么很明显，通过<code>reactive</code>创建出来的这个<code>proxy</code> 对象将会获得 <code>obj</code> 的引用。</p><p>&emsp;&emsp;和以前一样，如果我们修改 <code>msg</code> 的 <code>content</code> ，毫无疑问，是会由于数据绑定而引起视图层的变化的。</p><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/toRaw1.png" alt=""></p><p>&emsp;&emsp;同时，<code>msg</code>的引用 <code>obj</code> 也同步发生了改变。</p><p>&emsp;&emsp;但是还有一个疑问，那就是如果我们修改 <code>msg</code> 的参数引用 <code>obj</code> ，能导致视图层发生变化吗？</p><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/toRaw.png" alt=""></p><p>&emsp;&emsp;观察界面和控制台，我点击了 <code>changeObj</code> 的按钮，在控制台显示 <code>msg</code> 和<code>obj</code> 的内容都发生了改变，但视图层并没有捕捉到这个变化。也就是说，如果我们找到 <code>reactive</code> 的源数据，对源数据进行改变的时候，是不会引起界面的改变，也就不会产生有关的计算了。</p><p>&emsp;&emsp;如果我们有修改 <code>msg</code> 的内容，又不想触发界面改变的时候，我们就可以修改 <code>obj</code>。</p><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/10/29/Vue3-0%EF%BC%88%E5%9B%9B%EF%BC%89toRaw/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/10/28/Vue3-0%EF%BC%88%E4%B8%89%EF%BC%89ref%E5%92%8Creactive/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/10/28/Vue3-0%EF%BC%88%E4%B8%89%EF%BC%89ref%E5%92%8Creactive/" itemprop="url">Vue3.0（三）reactive和ref</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-10-28T21:25:00+08:00">2020-10-28 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-30T23:10:07+08:00">2020-10-30 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/10/28/Vue3-0%EF%BC%88%E4%B8%89%EF%BC%89ref%E5%92%8Creactive/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/10/28/Vue3-0%EF%BC%88%E4%B8%89%EF%BC%89ref%E5%92%8Creactive/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">2.3k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">10</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="1-什么是reactive"><a href="#1-什么是reactive" class="headerlink" title="1.什么是reactive?"></a>1.什么是reactive?</h1><ul><li>reactive是Vue3中提供的实现响应式数据的方法</li><li>在Vue2中响应式数据是通过<code>defineProperty</code>来实现的,而在Vue3中响应式数据是通过ES6的Proxy来实现的</li></ul><h1 id="reactive注意点"><a href="#reactive注意点" class="headerlink" title="reactive注意点:"></a>reactive注意点:</h1><ul><li><code>reactive</code>参数<strong>必须是对象或数组</strong>(json/arr)，否则无法变成响应式</li><li>如果给reactive传递了其它对象,默认情况下修改对象，界面不会自动更新。如果想更新，可以通过重新赋值的方式</li></ul><h1 id="使用reactive"><a href="#使用reactive" class="headerlink" title="使用reactive"></a>使用reactive</h1><h2 id="基本类型的使用"><a href="#基本类型的使用" class="headerlink" title="基本类型的使用"></a>基本类型的使用</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"clickFun"</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123; reactive &#125; <span class="keyword">from</span> <span class="string">'vue'</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript">  name: <span class="string">'App'</span>,</span></span><br><span class="line">  setup() &#123;</span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> msg = reactive(<span class="number">0</span>)</span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">clickFun</span><span class="params">()</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(msg);</span></span><br><span class="line">      msg++;</span><br><span class="line">    &#125;</span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span> &#123;</span></span><br><span class="line">      msg,</span><br><span class="line">      clickFun</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/10/28/Vue3-0%EF%BC%88%E4%B8%89%EF%BC%89ref%E5%92%8Creactive/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/10/28/Vue3-0%EF%BC%88%E4%BA%8C%EF%BC%89%E7%BB%84%E5%90%88API/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/10/28/Vue3-0%EF%BC%88%E4%BA%8C%EF%BC%89%E7%BB%84%E5%90%88API/" itemprop="url">Vue3.0（二）组合API(Composition API)</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-10-28T20:01:23+08:00">2020-10-28 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-28T21:22:44+08:00">2020-10-28 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/10/28/Vue3-0%EF%BC%88%E4%BA%8C%EF%BC%89%E7%BB%84%E5%90%88API/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/10/28/Vue3-0%EF%BC%88%E4%BA%8C%EF%BC%89%E7%BB%84%E5%90%88API/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">1.1k </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">4</span></div></div></header><div class="post-body" itemprop="articleBody"><p>&emsp;&emsp;Vue 3.0 中引入了一种新的代码编写方式，那就是 <code>Composition API</code>，这是有别于 <code>Vue 2.0 Options API</code>的一种函数式 API。无需通过指定一长串选项来定义组件，<code>Composition API</code>允许用户像编写函数一样自由地组合逻辑和代码。他就是<strong>将我们封装好的具备独立功能的函数组合在一起</strong><br>来看看代码示例：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">//Vue2中组件的写法</span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;count&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"getClick"</span>&gt;</span>button<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="actionscript">  name: <span class="string">'App'</span>,</span></span><br><span class="line">  data()&#123;</span><br><span class="line"><span class="actionscript">    <span class="keyword">return</span>&#123;</span></span><br><span class="line">      count:0</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    getClick()&#123;</span><br><span class="line"><span class="actionscript">      <span class="keyword">this</span>.count++;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>写出来的代码长这样：</p><p><img src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/ToDoListNew.png" alt=""></p><div class="post-button text-center"><a class="btn" href="/MyBlog/2020/10/28/Vue3-0%EF%BC%88%E4%BA%8C%EF%BC%89%E7%BB%84%E5%90%88API/#more" rel="contents">阅读全文 &raquo;</a></div></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/10/28/Vue3-0/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/10/28/Vue3-0/" itemprop="url">Vue3.0（一） 认识Vue3.0</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-10-28T14:46:02+08:00">2020-10-28 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-30T22:10:34+08:00">2020-10-30 </time></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/10/28/Vue3-0/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/10/28/Vue3-0/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">940 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">4</span></div></div></header><div class="post-body" itemprop="articleBody"><h1 id="Vue3-0六大亮点"><a href="#Vue3-0六大亮点" class="headerlink" title="Vue3.0六大亮点"></a>Vue3.0六大亮点</h1><ul><li>Performance:性能比Vue 2.x快1.2~2倍</li><li>Tree shaking support:按需编译,体积比Vue2.x更小</li><li>Composition API:组合API(类似React Hooks)</li><li>Better TypeScript support:更好的Ts支持</li><li>Custom Renderer API:暴露了自定义渲染API</li><li>Fragment，Teleport (Protal)，Suspense:更先进的组件<div class="post-button text-center"><a class="btn" href="/MyBlog/2020/10/28/Vue3-0/#more" rel="contents">阅读全文 &raquo;</a></div></li></ul></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="https://gitee.com/yang_yu_xiang/MyBlog/MyBlog/2020/10/24/Webpack%EF%BC%88%E4%B8%89%EF%BC%89/"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="杨雨翔"><meta itemprop="description" content=""><meta itemprop="image" content="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Yang's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline"><a class="post-title-link" href="/MyBlog/2020/10/24/Webpack%EF%BC%88%E4%B8%89%EF%BC%89/" itemprop="url">Webpack（三） devServer</a></h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-10-24T16:20:09+08:00">2020-10-24 </time><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-calendar-check-o"></i> </span><span class="post-meta-item-text">更新于&#58;</span> <time title="更新于" itemprop="dateModified" datetime="2020-10-27T16:58:34+08:00">2020-10-27 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span> </a></span>， <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/MyBlog/categories/%E5%89%8D%E7%AB%AF/Webpack/" itemprop="url" rel="index"><span itemprop="name">Webpack</span> </a></span></span><span class="post-comments-count"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-comment-o"></i> </span><a href="/MyBlog/2020/10/24/Webpack%EF%BC%88%E4%B8%89%EF%BC%89/#comments" itemprop="discussionUrl"><span class="post-comments-count valine-comment-count" data-xid="/MyBlog/2020/10/24/Webpack%EF%BC%88%E4%B8%89%EF%BC%89/" itemprop="commentCount"></span></a></span><div class="post-wordcount"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i> </span><span class="post-meta-item-text">字数统计&#58;</span> <span title="字数统计">203 </span><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-clock-o"></i> </span><span class="post-meta-item-text">阅读时长 &asymp;</span> <span title="阅读时长">1</span></div></div></header><div class="post-body" itemprop="articleBody"><p>&emsp;&emsp;在Webpack中，除了<code>entry、output、module、plugins、mode</code>这五大部分，我们还有一个部分是<code>devServer</code>(开发服务器)，它的作用是用来自动化（自动编译，自动打开浏览器，自动刷新浏览器，设置代理)等。</p><p>在启动之前，我们需要下载包</p><blockquote><p>npm install webpack-dev-server -D</p></blockquote><p>配置如下</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    entry: <span class="string">'./ src/index.js '</span>,</span><br><span class="line">    output: &#123;&#125;,</span><br><span class="line">    <span class="built_in">module</span>: &#123;&#125;,</span><br><span class="line">    plugins:[],</span><br><span class="line">    mode: <span class="string">'development'</span>,</span><br><span class="line"></span><br><span class="line">    <span class="comment">//启动devServer指令为:npx webpack-dev-server</span></span><br><span class="line">    <span class="comment">//特点:只会在内存中编译打包，不会有任何输出。即build文件在内存中给你弄好，原本的文件夹中不会出现build文件夹</span></span><br><span class="line"></span><br><span class="line">    devserver:&#123;</span><br><span class="line">        <span class="comment">//要运行的项目的根目录</span></span><br><span class="line">        contentBase: resolve(__dirname,<span class="string">' build'</span>),</span><br><span class="line">        <span class="comment">//启动gzip压缩</span></span><br><span class="line">        compress:<span class="literal">true</span>,</span><br><span class="line">        <span class="comment">//指定端口号</span></span><br><span class="line">        port:<span class="number">3000</span>,</span><br><span class="line">        <span class="comment">//编译完成自动打开浏览器</span></span><br><span class="line">        open:<span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></div><div></div><div style="text-align:center;color:#ccc;font-size:16px">---------------- The End ----------------</div><footer class="post-footer"><div class="post-eof"></div></footer></div></article></section><nav class="pagination"><span class="page-number current">1</span><a class="page-number" href="/MyBlog/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/MyBlog/page/6/">6</a><a class="extend next" rel="next" href="/MyBlog/page/2/">&gt;</a></nav></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div id="sidebar-dimmer"></div><div class="sidebar-inner"><section class="site-overview-wrap sidebar-panel sidebar-panel-active"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" src="https://gitee.com/yang_yu_xiang/BlogImages/raw/master/img/psb.jpg" alt="杨雨翔"><p class="site-author-name" itemprop="name">杨雨翔</p><p class="site-description motion-element" itemprop="description"></p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/MyBlog/archives/"><span class="site-state-item-count">53</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/MyBlog/categories/index.html"><span class="site-state-item-count">12</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/MyBlog/tags/index.html"><span class="site-state-item-count">32</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://gitee.com/yang_yu_xiang" target="_blank" title="码云"><i class="fa fa-fw fa-git"></i>码云</a> </span><span class="links-of-author-item"><a href="http://wpa.qq.com/msgrd?v=3&uin=1372201820&site=qq&menu=yes" target="_blank" title="QQ"><i class="fa fa-fw fa-qq"></i>QQ</a> </span><span class="links-of-author-item"><a href="https://github.com/gezhicui" target="_blank" title="Github"><i class="fa fa-fw fa-github"></i>Github</a> </span><span class="links-of-author-item"><a href="mailto:1372201820@qq.com" target="_blank" title="E-Mail"><i class="fa fa-fw fa-envelope"></i>E-Mail</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-block"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-link"></i> 友情链接</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="https://cloudhao.top/#/search/%E5%9F%9F%E5%90%8D" title="陈昀昊的小窝" target="_blank">陈昀昊的小窝</a></li><li class="links-of-blogroll-item"><a href="http://www.shezhiwei.top/" title="佘智伟的博客" target="_blank">佘智伟的博客</a></li><li class="links-of-blogroll-item"><a href="https://blog.csdn.net/qq_43185206" title="阿呆的小鸡仔" target="_blank">阿呆的小鸡仔</a></li></ul></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">&copy; <span itemprop="copyrightYear">2021</span> <span class="with-love"><i class="fa fa-send"></i> </span><span class="author" itemprop="copyrightHolder">杨雨翔</span> <span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-area-chart"></i> </span><span class="post-meta-item-text">站点总字数&#58;</span> <span title="站点总字数">61.9k</span></div><div class="busuanzi-count"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span class="site-uv">本站访问数 <i class="fa fa-user"></i> <span class="busuanzi-value" id="busuanzi_value_site_uv"></span> 人次 </span><span class="site-pv">本站总访问量 <i class="fa fa-eye"></i> <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> 次</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i> <span id="scrollpercent"><span>0</span>%</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/MyBlog/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/MyBlog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/MyBlog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/MyBlog/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/MyBlog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/MyBlog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/MyBlog/js/src/utils.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/motion.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/affix.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/schemes/pisces.js?v=5.1.4"></script><script type="text/javascript" src="/MyBlog/js/src/bootstrap.js?v=5.1.4"></script><script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="//unpkg.com/valine/dist/Valine.min.js"></script><script type="text/javascript">var GUEST=["nick","mail","link"],guest="nick";guest=guest.split(",").filter(e=>GUEST.indexOf(e)>-1),new Valine({el:"#comments",verify:!1,notify:!1,appId:"i5Tl5zN4f4LxoJgipanUuaml-gzGzoHsz",appKey:"wqw6uYNCQkeVxBffKebM29NH",placeholder:"说点什么吧...",avatar:"mm",guest_info:guest,pageSize:"10"})</script><script type="text/javascript">var isfetched=!1,isXml=!0,search_path="search.xml";0===search_path.length?search_path="search.xml":/json$/i.test(search_path)&&(isXml=!1);var path="/MyBlog/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")};function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map((function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}})).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach((function(n){var r=!1,s=0,a=0,i=n.title.trim(),c=i.toLowerCase(),l=n.content.trim().replace(/<[^>]+>/g,""),h=l.toLowerCase(),p=decodeURIComponent(n.url),u=[],f=[];if(""!=i&&(e.forEach((function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}u=u.concat(e(t,c,!1)),f=f.concat(e(t,h,!1))})),(u.length>0||f.length>0)&&(r=!0,s=u.length+f.length)),r){function d(e,o,n,r){for(var s=r[r.length-1],i=s.position,c=s.word,l=[],h=0;i+c.length<=n&&0!=r.length;){c===t&&h++,l.push({position:i,length:c.length});var p=i+c.length;for(r.pop();0!=r.length&&(i=(s=r[r.length-1]).position,c=s.word,p>i);)r.pop()}return a+=h,{hits:l,start:o,end:n,searchTextCount:h}}[u,f].forEach((function(t){t.sort((function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length}))}));var g=[];0!=u.length&&g.push(d(0,0,i.length,u));for(var v=[];0!=f.length;){var $=f[f.length-1],C=$.position,m=$.word,x=C-20,w=C+80;x<0&&(x=0),w<C+m.length&&(w=C+m.length),w>l.length&&(w=l.length),v.push(d(0,x,w,f))}v.sort((function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start}));var y=parseInt("1");function T(t,e){var o="",n=e.start;return e.hits.forEach((function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+='<b class="search-keyword">'+t.substring(e.position,r)+"</b>",n=r})),o+=t.substring(n,e.end)}y>=0&&(v=v.slice(0,y));var b="";0!=g.length?b+="<li><a href='"+p+"' class='search-result-title'>"+T(i,g[0])+"</a>":b+="<li><a href='"+p+"' class='search-result-title'>"+i+"</a>",v.forEach((function(t){b+="<a href='"+p+'\'><p class="search-result">'+T(l,t)+"...</p></a>"})),b+="</li>",o.push({item:b,searchTextCount:a,hitCount:s,id:o.length})}})),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"><i class="fa fa-search fa-5x" /></div>';else if(0===o.length)s.innerHTML='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>';else{o.sort((function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id}));var a='<ul class="search-result-list">';o.forEach((function(t){a+=t.item})),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click((function(t){t.stopPropagation(),!1===isfetched?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()})),$(".popup-btn-close").click(onPopupClose),$(".popup").click((function(t){t.stopPropagation()})),$(document).on("keyup",(function(t){27===t.which&&$(".search-popup").is(":visible")&&onPopupClose()}))</script><script src="/MyBlog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"model":{"jsonPath":"/MyBlog/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":false},"log":false});</script></body></html>